<template>
  <div>
        <el-container class="form-container">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>模板信息</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="submitForm">保存</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                        <el-tabs v-model="activeTab" type="border-card">
                    <el-tab-pane label="基本信息" name="base" >
                      <el-row>
                        <el-col :span="24">
                          <el-form-item  label="模板名称"  prop="fdName">
                            <el-input class="input" v-model="form.fdName" style="width:100%"/>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="8">
                          <el-form-item  label="分类名称"   prop="fdCategoryId">
                            <sys-category-select-tree
                              v-model="form.fdCategoryId"
                              :nameValue.sync="form.fdCategoryName"
                              :modelName="modelName"
                              clearable
                            />
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="表单配置" name="form">
                      <form-designer ref="formDesigner" v-model="form.fdForm"></form-designer>
                    </el-tab-pane>
                  </el-tabs>
                   </el-form>
                </div>
            </el-card>
        </el-container>
    </div>
</template>

<script>
import sysCategorySelectTree from "@/components/form/FancySysCategorySelectTree";
import formUtils from '@/utils/formUtils';
export default {
  name:'SysFormTemplateAdd',
  data() {
    return{
      form: {
        fdId:'',
        fdName: '',
        fdForm:'',
        fdCategoryId:'',
        fdCategoryName:''
      },
      rules:{
        fdName :[{required: true, message: '请输入标题', trigger: 'blur'}],
        fdCategoryName :[{required: true, message: '请选择分类', trigger: 'change'}],
      },
      activeTab:'base',
      modelName:'com.fancy.application.sys.form.entity.SysFormMain'
    }
  },
  components:{
    sysCategorySelectTree
  },
  created() {
    this.initParam();
  },
  methods: {
    submitForm() {
      this.form.fdForm = this.$refs.formDesigner.getFormData();
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let forms = formUtils.convertToModel(this.form);
          this.$put('/api/sys/form/sys_form_template',forms).then((res) => {
            if(res.status==1){
              this.$message({
                message: res.message,
                type: 'success',
                onClose:()=>{
                    this.$common.closeTag();
                }
              });
            }else{
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    initParam() {
      this.form.fdCategoryId = this.$route.query.fdCategoryId;
      this.form.fdCategoryName = this.$route.query.fdCategoryName;
      let fdId = this.$route.query.id;
      if(formUtils.isNotEmpty(fdId)){
        this.$fetch('/api/sys/form/sys_form_template',{
          id:fdId
        }).then((res) => {
          formUtils.convertToForm(res.data,this.form);
        });
      }
    }
  },
  watch:{
  }
}
</script>

<style scoped>
@import "~@/assets/css/form.css";
.container{
  width: 100%;
}
.breadcrumb{
  height:15px;
  margin-top:45px;
  margin-bottom: 10px;
}
.el-tabs--border-card .el-tabs__content{
  padding: 0px;
}
.form-container >>> .el-tabs__content{
  overflow: inherit;
}
</style>